import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { Header } from '../common/header';
import { connect } from '@tarojs/redux'
import { State, Props } from './index.interface'

import '../common/header.scss'
import './index.scss'

@connect(({ address }) => ({
  ...address,
}))

export default class Index extends Component<State, Props> {

  constructor(props: Props){
    super(props);
  }
  async componentDidMount () {
    const { dispatch } = this.props;
    await dispatch({
      type: 'address/getAddress',
      payload: {}
    })
  }

  onClickLeftIcon(){
    Taro.navigateBack();
  }

  handleRedirectAdd(){
    Taro.navigateTo({
      url: '/pages/address/add?back=1'
    });
  }

  handleUpdateUseing(id, field, val){
  }

  handleEdit(id){
    Taro.navigateTo({
      url:'/pages/address/add?id='+id+'&back=1'
    });
  }

  handleUseAddress(id){}

  render () {
    const { address } = this.props;
    return (
      <View>
       <Header 
          leftIconType='chevron-left' 
          onClickLeftIcon={this.onClickLeftIcon} 
          title='收货地址'>
        </Header>
        <ScrollView style={{marginBottom:'88px'}}>
          {
            address.map(function(item){
            return <View className='address-list'>
              <View className='address-list-content'>
                <View className='address-list-item'>
                  <View className='address-list-item-name'>
                    <View>{item.consignee}</View>
                    <View className='address-list-item-mobile'>{item.contact}</View>
                  </View>
                  <View className='address-list-item-detail'>{item.province_name} {item.city_name} {item.district_name} {item.address}</View>
                </View>
                {
                  this.state.select === item.id
                  ?
                  <AtIcon prefixClass='icon' value='guanbi' size='22' color='#F2CA26'></AtIcon>
                  :
                  <View className='address-check-use' onClick={this.handleUseAddress.bind(this, item.id)}>使用</View>
                }
              </View>
              <View className='address-list-action'>
                  {
                    item.default
                    ?
                    <View className='address-list-action-left'>
                      <AtIcon prefixClass='icon' value='xuanze' size='18' color='#F2CA26'></AtIcon>
                      <View className='ml10'>已设为默认</View>
                    </View>
                    :
                    <View className='address-list-action-left' onClick={this.handleUpdateUseing.bind(this, item.id, 'useing', item.useing?0:1)}>
                      <AtIcon prefixClass='icon' value='weixuanzhongyuanquan' size='18' color='#8A857C'></AtIcon>
                      <View className='ml10'>设为默认</View>
                    </View>
                  }
                
                <View className='address-list-action-right'>
                  <View className='address-list-action-bj'onClick={this.handleEdit.bind(this, item.id)}>
                    <AtIcon prefixClass='icon' value='icon6' size='12' color='#8A857C'></AtIcon>
                    <View className='ml10'>编辑</View>
                  </View>
                  <View className='address-list-action-sc' onClick={this.handleUpdateUseing.bind(this, item.id, 'del', 1)}>
                    <AtIcon prefixClass='icon' value='shanchu' size='12' color='#8A857C'></AtIcon>
                    <View className='ml10'>删除</View>
                  </View>
                </View>
              </View>
            </View>
            })
          }
        </ScrollView>
        <View onClick={this.handleRedirectAdd} className='address-add'>添加地址</View>
      </View>
    )
  }
}